<template>
  <div>
    <van-nav-bar
      fixed
      title="商品核销"
      left-arrow
      class="bg-physio-primary1 color-white"
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top">
      <div class=" bg-physio-primary1 color-white pt-1" style="min-height:100vh">
        <div class="scanBox flex-center color-primary flex-d-c" @click="scan">
          <svg-icon icon-class="scan" class=" fs-80" @goPage="scan" />
          <p class="fs-28 pt-30">扫一扫核销码</p>
        </div>
        <div class="mlr-50 flex-s-c pos-r">
          <svg-icon icon-class="edit" class="fs-24 pos-a left-20" />
          <input v-model="searchVal" type="text" placeholder="手动输入核销码" class="flex-1 input" style="border: 1px solid currentColor;">
          <button class="btn" @click="SubmitWriteoff">确定</button>
        </div>
        <div v-show="writeoffResult" class="infoBox">
          <!-- <div class="topBg" /> -->
          <img :src="WriteoffBg" alt="" class="WriteoffBg">
          <div class="info">
            <div v-show="writeoffState===1" class="successInfo">
              <div class="success flex-center color-primary" style="border-bottom: 1px dashed currentColor;">
                <svg-icon icon-class="success" class="fs-60 mr-20 color-success" />
                <span class="fs-36 color-success">核销成功</span>
              </div>
              <productList :product-list="productList" list-type="productWriteoff" />
            </div>
            <div v-show="writeoffState===2" class="tac color-warning">
              <svg-icon icon-class="warning" class="fs-150 mt-150" />
              <p class="fs-36 mt-20">{{ errorMsg }}</p>
            </div>
            <div v-show="writeoffState===3" class="tac color-danger">
              <svg-icon icon-class="fail" class="fs-150 mt-150" />
              <p class="fs-36 mt-20">核销失败</p>
            </div>
          </div>
          <!-- <div class="bottomBg" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productList from 'components/productList'
import { SubmitWriteoff } from 'api/writeoff'
export default {
  components: {
    productList
  },
  data() {
    return {
      WriteoffBg: require('@/assets/images/WriteoffBg.png'),
      searchVal: '', // 核销码
      writeoffResult: false, // 核销结果
      writeoffState: '', // 核销状态
      errorMsg: '', // 错误提示
      productList: [] // 详情

    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {   
    scan() {
      console.log('saoma')
      const _this = this
      _this.$utils.Qcode(0, function(res) {
        console.log(res)
        _this.searchVal = res
        _this.SubmitWriteoff()
      })
    },
    SubmitWriteoff() {
      if (!this.searchVal) {
        this.$toast.fail('核销码不能为空，请输入核销码！')
        return false
      }
      SubmitWriteoff({ WriteoffCode: this.searchVal }).then(res => {
        if (res) {
          this.writeoffResult = true
          if (res.Data) {
            this.writeoffState = 1
            this.productList = []
            this.productList.push(res.Data)
          } else {
            this.$toast.fail(res.Msg)
            if (res.Msg === '该码已核销' || res.Msg === '该码不存在') {
              this.writeoffState = 2
              this.errorMsg = res.Msg
            } else {
              this.writeoffState = 3
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom-width:0;
}
/deep/.color-white{
  .van-icon,.van-nav-bar__title,.van-nav-bar__right .van-nav-bar__text{
    color:$colorF;
  }
}
.scanBox{
  background: $colorF;
  height: 264px;
  width: 264px;
  border-radius: 50%;
  margin: 80px auto 60px;
  text-align: center;
  box-shadow: 0 0 20px $colorF;
}
.input{
  line-height: 1;
  padding:21px 48px;
  margin-right: 16px;
  border-radius: 12px;
  color:$colorF;
  border: 1px solid currentColor;
  &::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
}
.btn{
  font-size: 26px;
  @include color-primary;
  line-height: 72px;
  padding: 0 44px;
  border-radius: 12px;
  background: $colorF;
  border:none;
}
.infoBox{
  margin: 66px 30px 0;
  height: 600px;
  position: relative;
  .WriteoffBg{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .info{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 14px;
    z-index: 1;
    .successInfo{
      .success{
        height: 174px;
        border-bottom: 1px dashed currentColor;
      }
      /deep/.bg-fa{
        background: $colorF;
      }
    }
  }
}
</style>
